<template>
  <cu-layout ref="layoutRef" navbar="custom" tabbar="/pages/user/index">
    <view class="index">
      <view class="index-bg">
        <image style="display: block; width: 100%;" src="@/static/img/index-bg.png" mode="widthFix" />
      </view>
      <view class="index-box">
        <view class="index-user flex" @click="openWxAuth">
          <image v-if="wxInfo.headimgurl" class="index-avatar" :src="wxInfo.headimgurl" mode="" />
          <image v-else class="index-avatar" src="/static/img/avatar.png" mode="" />
          <view class="flex-1">
            <view class="user-name">{{ wxInfo.nickname || '微信昵称' }}</view>
            <view class="flex">
              <view class="user-level flex-a">
                <image class="user-level-icon" src="@/static/img/vip.png" mode="widthFix" />
                <view class="">一星顾客</view>
              </view>
            </view>
          </view>
        </view>
        <view class="px-15">
          <view class="mt-15">
            <view class="card card-grid">
              <view class="card-col" @click="openMyCombo">
                <view class="card-col-bg card-col-bg1">
                  <image class="card-col-img" src="/static/img/user/taocan.png" mode="widthFix" />
                </view>
                <view class="">我的套餐</view>
              </view>
              <view class="card-col" @click="openOrder">
                <view class="card-col-bg card-col-bg2">
                  <image class="card-col-img" src="/static/img/user/dingdan.png" mode="widthFix" />
                </view>
                <view class="">我的订单</view>
              </view>
              <view class="card-col" @click="openCombo">
                <view class="card-col-bg card-col-bg3">
                  <image class="card-col-img" src="/static/img/user/gouwu.png" mode="widthFix" />
                </view>
                <view class="">套餐订购</view>
              </view>
            </view>
          </view>

          <view class="ucard ucard-column mt-15">
            <view class="ucard-head">
              <view class="ucard-head-title">我的服务</view>
            </view>
            <view class="ucard-list">
              <view class="ucard-cell" @click="openAddress">
                <view class="ucard-cell-left">
                  <view class="iconfont icon-zuobiao" />
                </view>
                <view class="ucard-cell-title">收货地址</view>
                <view class="ucard-cell-right">
                  <view class="iconfont icon-xiangyou1" />
                </view>
              </view>
              <view class="ucard-cell" @click="layoutRef.openKefu()">
                <view class="ucard-cell-left">
                  <view class="iconfont icon-kefu" />
                </view>
                <view class="ucard-cell-title">联系客服</view>
                <view class="ucard-cell-right">
                  <view class="iconfont icon-xiangyou1" />
                </view>
              </view>
              <view class="ucard-cell" @click="yinsiRef.open()">
                <view class="ucard-cell-left">
                  <view class="iconfont icon-gonglve" />
                </view>
                <view class="ucard-cell-title">隐私协议</view>
                <view class="ucard-cell-right">
                  <view class="iconfont icon-xiangyou1" />
                </view>
              </view>
              <view v-if="isLogin" class="ucard-cell" @click="logout">
                <view class="ucard-cell-left">
                  <view class="iconfont icon-qingchu" />
                </view>
                <view class="ucard-cell-title">退出登录</view>
                <view class="ucard-cell-right">
                  <view class="iconfont icon-xiangyou1" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <PageYinse ref="yinsiRef" />
    </view>
  </cu-layout>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import PageYinse from './yinsi.vue'
import $ from '@/sheep'
const useUser = $.store('user')
const agent = computed(() => useUser.agent)
const wxInfo = computed(() => useUser.wxInfo)
const isLogin = computed(() => useUser.isLogin)
const layoutRef = ref(null)
const yinsiRef = ref(null)
onLoad(() => {
  uni.hideTabBar()
})

function logout() {
  useUser.clearToken()
  uni.reLaunch({
    url: '/pages/index/index'
  })
}

function openMyCombo() {
  if (!isLogin.value) {
	  useUser.setAuthType('smsLogin')
  } else if (agent.value?.id) {
    $.router.go('/pages/user/combo', { agentId: agent.id })
  } else {
    layoutRef.value.openBind()
  }
}

function openOrder() {
  if (isLogin.value) {
    $.router.go('/pages/order/index')
  } else {
    useUser.setAuthType('smsLogin')
  }
}

function openCombo() {
  if (isLogin.value) {
    $.router.go('/pages/goods/combo')
  } else {
    useUser.setAuthType('smsLogin')
  }
}

function openAddress() {
  if (isLogin.value) {
    $.router.go('/pages/user/address')
  } else {
    useUser.setAuthType('smsLogin')
  }
}

function openWxAuth() {
  if (!$.utils.isWx()) {
    return
  }
  if (wxInfo.value?.id) {
    $.utils.showModal({
      title: '获取昵称、头像',
      content: '获取您的微信用户昵称、头像，主要用于完善个人资料以便提供更好使用体验'
    }).then((res) => {
      if (res.confirm) {
        layoutRef.value.wxAuth()
      }
    })
  } else {
    layoutRef.value.wxAuth()
  }
}

</script>
<style lang="scss" scoped>
.index {
	position: relative;
}
.index-bg {
	position: absolute;
	z-index: 1;
	width: 100%;
	left: 0;
	top: 0;
	background-image: linear-gradient(to bottom, #8494f4 0%,  #b4c0f4 70%, #f5f5f7 100%);
	padding-bottom: 300rpx;
}
.index-box {
	position: relative;
	z-index: 2;
}
.index-user {
	padding: 36rpx;
	.icon-kefu {
		font-size: 48rpx;
		color: #fff;
	}
}
.index-user .flex-1 {
	padding: 0 40rpx;
}
.index-avatar {
	display: block;
	width: 132rpx;
	height: 132rpx;
	border-radius: 50%;
}
.user-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
	padding: 16rpx 0 10rpx;
}
.user-level {
	font-size: 20rpx;
	height: 36rpx;
	background-image: linear-gradient(to bottom, #999 0%,  #666 100%);
	color: #fff;
	border-radius: 36rpx;
	padding: 0 20rpx;
}
.user-level-icon {
	display: block;
	width: 20rpx;
	height: 18rpx;
	margin-right: 8rpx;
}
.card {
	padding: 32rpx 40rpx;
	border-radius: 12rpx;
	background-color: #fff;
	box-shadow: 0 1px 3px #d9d5d5;
	&.card-grid {
		padding-left: 16rpx;
		padding-right: 16rpx;
	}
}
.card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20rpx;
}
.card-col {
	// background-color: #f8faff;
	padding: 16rpx 0;
	text-align: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.card-col-img {
	display: block;
	width: 52rpx;
	height: 52rpx;
}
.card-col-bg {
	padding: 12rpx;
	margin-bottom: 20rpx;
	border-radius: 8rpx;
}
.card-col-bg1 {
	background-image: linear-gradient(-45deg, #F8BBD0 0%, #FCE4EC 100%);
}
.card-col-bg2 {
	background-image: linear-gradient(-45deg, #BBDEFB 0%, #E3F2FD 100%);
}
.card-col-bg3 {
	background-image: linear-gradient(45deg, #FFCCBC 100%, #FBE9E7 0);
}

.ucard {
	background-color: #fff;
	border-radius: 12rpx;
	box-shadow: 0 4px 13px 0 rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 12%), 0 7px 26px 6px rgb(0 0 0 / 5%);
	padding: 40rpx 0;
	margin-bottom: 30rpx;
	&.ucard-column {
		padding-bottom: 0;
		.ucard-head {
			margin-bottom: 20rpx;
		}
	}
	.ucard-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-bottom: 40rpx;
	}
	.ucard-head-title {
		font-size: 30rpx;
		font-weight: bold;
	}
	.ucard-head-more {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: $uv-tips-color;
		.iconfont {
			font-size: 24rpx;
			margin-left: 6rpx;
		}
	}
	.ucard-item {
		flex: 1;
		.iconfont {
			font-size: 60rpx;
		}
	}
	.ucard-label {
		font-size: 26rpx;
		font-weight: 500;
		margin-top: 16rpx;
	}
	.ucard-cell {
		position: relative;
		display: flex;
		align-items: center;
		padding: 28rpx;
		line-height: 40rpx;
		&::after {
			--left: 80rpx;
			content: '';
			position: absolute;
			bottom: 0;
			left: var(--left);
			width: calc(100% - var(--left));
			border-bottom: 1rpx solid rgba(0,0,0,0.05);
		}

	}
	.ucard-cell-left {
		padding-right: 16rpx;
		.iconfont {
			font-size: 36rpx;
			color: $uv-primary;
		}
	}
	.ucard-cell-title {
		flex: 1;
	}
	.ucard-cell-right {
		padding-left: 12rpx;
		color: $uv-tips-color;
		font-size: 28rpx;
	}
}
.ucard-title {

}

</style>
